<template>
    <swiper :options="swiperOption" ref="mySwiper" class="banner">
        <!-- slides -->
        <swiper-slide v-for="i in contantlist" :key="i.img">
            <img :src="i.img">
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
</template>

<script>
    import 'swiper/dist/css/swiper.css'
    import {swiper, swiperSlide} from 'vue-awesome-swiper'

    export default {
        name: "swipter",
        props: {
            contantlist: {
                type: Array
            }
        },
        components: {
            swiper,
            swiperSlide
        },
        data() {
            return {
                swiperOption: {
                    autoplay: {
                        delay: 1000
                    },
                    loop: true,
                    pagination: {
                        el: ".swiper-pagination"
                    },

                },
            };
        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.swiper
            }
        },
        mounted() {
        }
    }
</script>

<style>
    .banner {
        width: 100%;
    }

    .banner img {
        width: 100%;
        border-radius: 10px;
    }

    .swiper-slide {
        padding: 0 10px;
        box-sizing: border-box;
    }

    .banner .swiper-pagination {
        bottom: 5px;
    }

    .banner .swiper-pagination .swiper-pagination-bullet {
        width: 15px;
        height: 3px;
        background: #fff;
        opacity: 0.5;
        border-radius: 5px;
        margin: 0 2px;
    }

    .banner
    .swiper-pagination
    .swiper-pagination-bullet.swiper-pagination-bullet-active {
        opacity: 1;
    }
</style>